 <template>
    <div v-if="!templateId || !projectId" class="empty-tip-pro">
      <div class="icon-wrap">
        <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
          <rect x="8" y="16" width="48" height="36" rx="8" fill="#ececff"/>
          <rect x="16" y="24" width="32" height="20" rx="4" fill="#bcbcff"/>
          <path d="M24 36h16" stroke="#6366f1" stroke-width="2" stroke-linecap="round"/>
          <circle cx="32" cy="34" r="2" fill="#6366f1"/>
        </svg>
      </div>
      <div class="main-text">请先选择一个项目</div>
      <el-button type="primary" class="go-btn" @click="goToProject">立即前往项目选择</el-button>
    </div>
    <budget-list v-else :params="params"></budget-list>

 </template>

 <script setup>
 import BudgetList from "@/components/BudgetList.vue";
 import { useRoute,useRouter } from 'vue-router'
 const router = useRouter()
const route = useRoute()
const templateId = route.query.templateId
const projectId = route.query.projectId
const params = { templateId, projectId }

function goToProject() {
  router.push('/plat-tools/project-manage')
}

 </script>

 <style scoped>
.empty-tip-pro {
   width: 100%;
   height: 100%;
   flex-direction: column;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-tip-pro > .card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px #6366f122;
  padding: 56px 32px 56px 32px;
  min-width: 340px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.6s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.icon-wrap {
  margin-bottom: 24px;
  background: linear-gradient(135deg, #ececff 0%, #f5f6ff 100%);
  border-radius: 50%;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px #6366f122;
}
.main-text {
  font-size: 22px;
  color: #6366f1;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.sub-text {
  color: #888;
  font-size: 15px;
  margin-bottom: 28px;
}
.countdown {
  color: #8b5cf6;
  font-weight: bold;
}
.go-btn {
  font-size: 28px;
  padding: 24px 36px;   
  border-radius: 12px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 12px #6366f122;
  transition: background 0.18s, box-shadow 0.18s;
}
.go-btn:hover {
  background: linear-gradient(90deg, #7c3aed 0%, #6366f1 100%);
  box-shadow: 0 4px 16px #6366f144;
}
</style>